
<script setup>
import { ref,watchEffect  } from 'vue';
import { useRoute } from 'vue-router';

const route = useRoute();
const activeIndex2 = ref(route.path);
watchEffect(() => {
  activeIndex2.value = route.path;  // 每当路由变化时，更新菜单的选中状态
});
</script>

<template >
    <div class="common-layout">
        <el-container>
        <el-header class="header">
            <div style="text-align: center;">
            <img src="/src/assets/logo2.jpg" alt="Image Description" />
            </div>
            <el-menu 
            :default-active="activeIndex2"
            class="el-menu-demo centered-menu"
            mode="horizontal"  
            background-color="#545c64"
            text-color="#fff"
            active-text-color="#ffd04b" 
            style="justify-content: center;" router>
                <el-menu-item index="/index" >首页</el-menu-item>
                <el-menu-item index="/indexJinquList">云游景区</el-menu-item>
                <el-menu-item index="/indexJindianList">特色景点</el-menu-item>
                <el-menu-item index="/indexJiudianList">酒店住宿</el-menu-item>
                <el-menu-item index="/indexXiaochiList">特色小吃</el-menu-item>
                <el-menu-item index="/userzhong">个人中心</el-menu-item>
            </el-menu>
        </el-header>
        <el-main style="margin-top: 11%;">
            <router-view></router-view>
        </el-main>
        <!-- <el-footer>青岛旅游平台后</el-footer> -->
        </el-container>
    </div>
</template>
  
<style scoped>
.common-layout{
    background-color: #fff;
}
.centered-menu .el-menu-item {
    margin: 0 20px;
    font-size: 18px;
}
</style>
  